<template>
	<view class="content">
		<!-- <view class="example">
			<u-steps :options="list1" :active="active" />
			<view class="buttn">
				<button type="primary" @click="submitData">提交</button>
			</view>
		</view> -->
		<view class="criter_bt">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>申请人员：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_user_name}}</text>
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>所属部门：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.apply_dept_name}}</text>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>申报时间：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_date}}</text>
				</view>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>检修信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修装置：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.equipment_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修设备：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*设备位号：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_no}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*工时：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.work_hours}}</text>
				</view>
			</view>
			<view class="dec_li ">
				<view class="dec_le">
					<label>*拍照取证：</label>
				</view>
				<view class="dec_ri">
					<view class="pic-view">
						<view style="width: 70%; display: flex;" >
							<view v-for="(jtem, j) in jsonData.pics" :key = "j" style="margin: 10rpx;">
								<image :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(j)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>*检修内容：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.check_content}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getFormatDateTime} from '@/utils/date-util.js'
	import {FILE_URL, saveBiddingInfo} from '@/api/maintenance/selfs.js'
	export default {
		data() {
			return {
				active: 1,
				type: 0,
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				now: '',
				maintain_hours: '',
				maintain_quote: '',
				begin_date: '',
				jsonData: {},
				fileUrl: FILE_URL
			}
		},
		methods: {
			dateChange(e) {
				this.begin_date = e.detail.value
			},
			previewImg(index) {
				let pics = []
				for (let i = 0; i < this.jsonData.pics.length; i ++) {
					pics[i] = this.fileUrl + this.jsonData.pics[i].pic_url
					console.log('PREVIEW', pics[i])
				}
				uni.previewImage({
					urls: pics,
					current: index
				});
			},
		},
		onLoad:function(e){
			this.type = e.type
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.jsonData = JSON.parse(e.jsonData)
			this.now = getFormatDateTime()
			this.begin_date = getFormatDateTime()
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.content{
		width: 100%;
		margin: 0 auto 80upx;
	}
	.example {
		width: 91%;
		margin: 20upx auto 20upx;
		padding: 0 30upx 0upx
	}
	.example-body {
		padding: 0 40upx
	}
.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;
		
	}

	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}
	.criter_bt{
		padding: 0 10px;
		height: 50px;
		background-color: #f7f7f7;
		font-weight: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.line{
		width: 8upx;
		height: 30upx;
		background: #267DFF;
		border-radius: 10upx;
		display: inline-block;
		vertical-align: middle;
	}
	.criter_bt text{
		padding-left: 10upx;
		vertical-align: middle;
		font-size: 32upx;
		color: #333333;
	}
	.dec_main{
		width: 94%;
	}
	.dec_li{
		width: 100%;
		margin: 30rpx  20rpx ;
		overflow: hidden;
	}
	.dush_li{
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 20upx;
	}
	.dec_le{
		width: 30%;
		float: left;
	}
	.dec_ri{
		float: left;
		width: 65%;
	}
	.dec_flex{
		height: 60upx;
		display: flex;
		align-items: center;
	}
	
	.dec_li label{
		color: #267DFF;
		font-size: 30upx;
	}
	.dec_li text{
		color: #666666;
		font-size: 30upx;
	}
	.dec_li .inppu{
		font-size: 30upx;
	}
	.bottom-view {
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.detail_img {
		width: 150rpx;
		height: 150rpx;
		border: #f4f4f4 solid 1rpx;
	}
	.pic-view {
		display: flex;
		align-items: center;
	}
</style>
